<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- vue的根实例(所有组件的父(代)组件) -->
    <div id="app">
        <!-- 组件(Vue实例)  子组件 -->
        <adver></adver>
    </div>
</body>
<script>
    //  小广告
    //  1. 页面加载完毕 等待5s 小广告显示
    //  2. 倒计时10s后关闭小广告
    //  3. 重复1-2
    //  4. 点击关闭按钮 => 清除小广告  => 重复 1 2 3


    // 组件是可复用的 Vue 实例
    // 1. 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的

    // 组件命名方式 
    // Vue2建议使用:中划线命名法  button-counter
    // Vue3建议使用:驼峰式命名法  ButtonCounter

    // 组件注册: 
    //  Vue.component("componentName",componentOptions={})

    // 注意:
    // 1. 每个组件必须只有一个根元素
    // 2. 组件要先注册在使用

    // 如何使用组件:
    // 可以在Vue根实例/父组件中，把这个组件作为自定义元素来使用：


    Vue.component("adver", {
        // 一个组件的 data 选项必须是一个函数，每个实例可以维护一份被返回对象的
        data: function () {  //每次使用组件时,会调用此方法生成一个新对象 
            return {
                intervalTimer: null,
                timeOutTimer: null,
                isShowAdv: false,
                count: 10,
            }
        },
        template: `
            <div class="adver-wrapper" v-if="isShowAdv">
            <div class="adver-header">
                <div class="adver-tips">距离广告关闭还有{{count}}秒</div>
                <div class="adver-close" @click="closeHandler">x</div>
            </div>
            <div class="adver-main">
                <a href="">
                    <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
                </a>
            </div>
        </div>`,
        methods: {
            init() {
                this.timeOutTimer = setTimeout(() => {
                    this.isShowAdv = true;
                    this.intervalTimer = setInterval(() => {
                        this.count--;
                        if (this.count <= 0) {
                            this.isShowAdv = false;
                            clearInterval(this.intervalTimer);
                            this.count = 10;
                            this.init();
                        }
                    }, 1000)
                }, 5000)
            },
            closeHandler() {
                clearInterval(this.intervalTimer);
                clearTimeout(this.timeOutTimer);
                this.isShowAdv = false;

                this.init();
            }
        },
        mounted() {
            this.init();
        }
    })

    var vm = new Vue({
        el: "#app",
        data: {

        }
    })







</script>

</html>